<template>
  <div class="can_tips">
    <head-top head-title="选举公示" go-back="true"></head-top>
   <div class="can_box">
     <!--数据展示部分-->
     <div class="can_list" v-if="canData.length !== 0 && codeNumber === 200">
        <!--头部-->
       <div class="can_search">
         <!--搜索部分-->
         <div class="search_box">
           <div class="search_view">
             <input type="text" @input="searchPlot" @keyup.enter="searchPlot" v-model="keyWords" placeholder="请输入投票码" >
             <img src="./images/serach_icon.png" alt="">
           </div>
         </div>
       </div>
        <!--列表部分-->
       <div class="tips_list">
         <div class="tips_title">
           <p>投票码</p>
           <p>议题标题</p>
           <p>参会时间</p>
           <p>详情</p>
         </div>
         <!--直接展示状态-->
         <div class="tips_ul" v-if="tipsShow">
           <div class="tips_li" v-for="(can,cindex) in canData" :key="cindex">
             <p>{{can.numbering}}</p>
             <p>{{can.type}}</p>
             <p>{{can.time}}</p>
             <p class="detail_color" @click="goCanDetail(can.vote_id,can.user_id)">查看详情</p>
           </div>
         </div>
         <!--搜索展示状态-->
         <div class="tips_ul" v-if="searchShow">
           <div class="tips_li" v-for="(scan,sindex) in searchData" :key="sindex">
             <p>{{scan.numbering}}</p>
             <p>{{scan.type}}</p>
             <p>{{scan.time}}</p>
             <p class="detail_color" @click="goCanDetail(can.vote_id,can.user_id)">查看详情</p>
           </div>
         </div>
       </div>
     </div>


     <!--暂无数据-->
     <div class="default1" v-if="canData.length === 0 && noFlag">
       <p>抱歉！暂无数据</p>
     </div>

     <!--400的情况-->
     <div class="default" v-if="codeNumber === 400">
       <p>{{errorText}}</p>
     </div>
   </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import {canList, serchTips} from '../../api/homeLogin'

  export default {
    name: 'CanTips',
    data () {
      return {
        keyWords: '', // 输入信息
        type: 'can', // 搜索类型
        itemid: '', // 议题id（选举没有）
        canData: [],
        errorText: '', // 错误信息
        codeNumber: '', // 存放code
        noFlag: false, // 判断有无数据的显示
        tipsShow: true, // 直接展示列表是否显示
        searchData: [], // 搜索接口请求的数据
        searchShow: false // 搜索展示列表是否显示
      }
    },
    created () {
      // console.log(this.$route.params.id)
      this._getCanList()
    },
    methods: {
      _getCanList () {
        this.tipsShow = true // 直接展示列表开启
        this.searchShow = false // 搜索展示列表关闭
        canList(this.$route.params.id).then(res => {
          if (res.code === 200) {
            // console.log(res.data)
            this.canData = res.data
            if (this.canData.length === 0) {
              this.noFlag = true
            }
            this.codeNumber = res.code
          }
          if (res.code === 400) {
            this.codeNumber = res.code
            this.errorText = res.error
          }
        })
      },
      // 搜索
      searchPlot() {
        serchTips(this.$route.params.id, this.type, this.itemid, this.keyWords).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.searchData = res.data
            this.tipsShow = false // 直接展示列表关闭
            this.searchShow = true // 搜索列表开启
          }
        })
      },
      // 去到查看详情页面
      goCanDetail (id, uid) {
        this.$router.push('/CanDetail/' + id + '/' + uid)
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.can_tips{
  width: 100%;
  padding-top: 40px;
  .can_box{
    .can_list{
      .can_search{
        background: url('http://pic.zgwyzxw.cn/banner_file%2F%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202004101310535e8fffe8f1b1d.png');
        background-position: bottom;
        .search_box{
          padding-top: 30px;
          text-align: center;
          padding-bottom: 30px;
          .search_view{
            background: #ffffff;
            display: inline-flex;
            align-items: center;
            border-radius: 5px;
            input{
              background: #fff;
              width: 120px;
              padding: 10px;
              outline: none;
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
              color: #555555;
              font-size: 15px;
              border: none;
            }
            img{
              padding-right: 10px;
            }
          }
        }
      }
      .tips_list{
        .tips_title{
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding-top: 10px;
          padding-bottom: 10px;
          box-shadow: 1px 2px 4px #888;
          p{
            padding: 10px;
            color: #0078de;
            font-size: 14px;
            text-align: center;
            width: 25%;
          }
        }
        .tips_ul{
          .tips_li{
            padding-top: 10px;
            padding-bottom: 10px;
            color: #555555;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            p{
              font-size: 14px;
              color: #555555;
              padding: 5px;
              text-align: center;
              width: 25%;
            }
            .detail_color{
              color: #0078de;
            }
          }
        }
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
  }
}
</style>
